<template>
  <div class="upload ml-10" style="display: inline-block;">
    <el-upload
      :before-upload="before"
      action="/admin/Index/upload"
      :show-file-list="false"
      ref="upload"
      :on-progress="progress"
      :on-success="success"
      :disabled="disabled"
      :data="data"
    >
      <span v-html="html" v-if="html!=undefined"></span>
      <el-button size="small" type="primary" v-else>{{title?title:'上传资料'}}</el-button>
    </el-upload>
    <!-- 添加资料 -->
    <el-dialog
      title="上传进度"
      :visible.sync="dialog.show"
      width="300px"
      ref="dialog"
      center
      @closed="stopUpload"
      :append-to-body="inner"
    >
      <div style="text-align:center">
        <el-progress type="circle" :percentage="dialog.number"></el-progress>
      </div>
      <span slot="footer" style="text-align:center">
        <el-button @click="down" v-text="dialog.state?'关 闭':'取 消'"></el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialog: {
        show: false,
        number: 0,
        state: false
      },
      file: ""
    };
  },
  props: ["title", "html", "inner", "disabled", "info", "data"],
  methods: {
    // 关闭
    down() {
      this.dialog.show = false;
      if (this.dialog.number == 100) {
        this.$emit("downFile", this.file);
      }
    },
    // 上传完成
    success(ref, f, l) {
      this.common.message({ message: ref.info });

      // 信息回调
      ref.other.file.info = this.info;
      this.file = ref.other;
      this.$emit("fileInfo", ref.other);
    },
    // 上传前
    before() {
      this.dialog.show = true;
    },
    // 进度条
    progress(e, f, l) {
      var dialog = this.dialog;
      dialog.number = ((e.loaded / e.total) * 100) | 0;
      if (dialog.number == 100) {
        dialog.state = true;
      }
    },
    // 中断上传
    stopUpload() {
      if (this.dialog.number < 100) {
        this.$refs.upload.abort();
        this.common.message({
          type: "info",
          message: "取消上传",
          duration: 2000
        });
        this.dialog.number = 0;
        this.dialog.state = false;
      }
    }
  }
};
</script>